<template>
    <div class="todo-show">
        <div class="todo-header">
            <input class="select-all" type="checkbox"
                v-if="todos.length > 0"
                v-bind:checked="!selectAll"
                v-on:change="selectAllChange($event)"/>
        </div>
        <todo-item
            v-for="(item, index) of todos"
            v-bind:key="index"
            v-bind:item="item"
            v-bind:index="index">
        </todo-item>
        <div class="todo-footer">
            <div class="footer-item"> total:  {{todos.length | itemStringFilter}} </div>
            <div class="footer-item"> active: {{todos | activeNumberFilter | itemStringFilter}} </div>
            <div class="footer-item"> finished: {{todos | finishedNumberFilter| itemStringFilter}} </div>
        </div>
    </div>
</template>

<script>
import TodoItem from './TodoItem.vue';

export default {
    name: 'TodoShow',
    computed: {
        todos: function () {
            return this.$store.state.todos;
        },
        selectAll: function () {
            return this.todos.reduce((result, todo) => {
                return result || todo.active;
            }, false);
        }
    },
    filters: {
        activeNumberFilter: function (todos) {
            return todos.filter(function (todo) {
                return todo.active;
            }).length;
        },
        finishedNumberFilter: function (todos) {
            return todos.filter(function (todo) {
                return !todo.active;
            }).length;
        },
        itemStringFilter: function (itemNumber) {
            return itemNumber > 1 ? `${itemNumber} items` : `${itemNumber} item`;
        }
    },
    methods: {
        selectAllChange: function (event) {
            this.$store.dispatch('allTodo', !event.target.checked);
        }
    },
    components: {
        TodoItem
    }
}
</script>

<style lang="less">
.todo-show {
    position: relative;

    .todo-header {
        position: absolute;
        top: -60px;
        height: 60px;
        width: 60px;

        .select-all {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: auto;
        }
    }

    .todo-footer {
        padding: 15px;
        font-size: 15px;
        color: grey;
        border-top: 1px solid #EEE;
        text-align: center;

        .footer-item {
            display: inline-block;
            padding: 5px 0px;
            text-align: center;
            margin: 5px 20px;
            width: 120px;
            border-radius: 3px;
            border: 1px solid rgba(200, 200, 200, 0.5);
            background-color: rgba(200, 200, 200, 0);
            transition: background-color 0.2s ease;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;

            &:hover {
                background-color: rgba(200, 200, 200, 0.5);
            }
        }
    }
}
</style>
